<!-- 新增订单 -->
<template>
  <div class="new-order-dialog">
    <el-dialog width="900px" class top="6vh" title="新增订单" :append-to-body="true" :visible="myVisible" @close="close" v-loading="loadingViewAll"
      element-loading-target="document.getElementById('onelyLodningView')"
      element-loading-text="正在加载..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.1)">
      <el-form :model="publicData24" label-width="100px" size="mini">
        <el-row>
          <el-col :span="8">
            <el-form-item label="客户：">
              <el-select style="width: 170px; height: 28px; line-height: 28px;" v-model="publicData24.customerId" filterable placeholder="请选择">
                <el-option v-for="item in kehuOptions" :key="item.UserId" :label="item.search" :value="item.UserId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="做箱时间：">
              <el-date-picker
              style="width: 170px; height: 28px; line-height: 28px;"
                value-format="yyyy-MM-dd HH:mm"
                v-model="publicData24.startTime"
                type="datetime"
                placeholder="选择日期时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-form-item label="港区：">
                <!-- <el-autocomplete
                  v-model="publicData24.yard"
                  :fetch-suggestions="duiSearch"
                  placeholder="请输入堆场"
                  @select="duichangId"
                >
                  <template slot-scope="{ item }">
                    <div>{{ item.value = item.yardName }}</div>
                  </template>
                </el-autocomplete> -->
                <el-input v-model="publicData24.port" style="width: 170px; height: 28px; line-height: 28px;"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="提单号：">
              <el-input @blur="getBoatComBlon()" v-model="publicData24.blno" style="width: 170px; height: 28px; line-height: 28px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="船名：" style="width: 305px;">
              <el-autocomplete
                  v-model="publicData24.boat"
                  style="width: 170px; height: 28px; line-height: 28px;"
                  :fetch-suggestions="shipSearch"
                  @select="chuanmingChange"
                  placeholder="请输入船名"
                >
                  <template slot-scope="{ item }">
                    <div>{{ item.value = item.sbv }}</div>
                  </template>
                </el-autocomplete>
                <el-tooltip class="item" effect="dark" content="如未找到所需船名/航次，请点击此按钮" placement="top">
                  <el-button
                    type="primary"
                    @click="getBoatIofnJH"
                    icon="el-icon-refresh"
                    circle
                  ></el-button>
                </el-tooltip>
                <!-- <el-select v-model="publicData24.boat" @change="chuanmingChange" filterable placeholder="请选择船名">
                  <el-option
                    v-for="item in chuanmingOptions"
                    :key="item.shipName"
                    :label="item.shipName"
                    :value="item.shipName"
                  ></el-option>
                </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="航次：">
              <el-input v-model="publicData24.voyage" auto-complete="off" style="width: 170px; height: 28px; line-height: 28px;"></el-input>
              <!-- <el-autocomplete style="width: 170px; height: 28px; line-height: 28px;"
                    v-model="publicData24.voyage"
                    :clearable="true"
                    :fetch-suggestions="hangciSearch"
                    @select="modhangciChange"
                    @blur="modhangciChange"
                  >
                    <template slot-scope="{ item }">
                      <div>{{ item.value = item.sailNum }}</div>
                    </template>
                  </el-autocomplete> -->
            </el-form-item>
          </el-col>

        </el-row>
          <!-- <el-col :span="8">
            <el-form-item label="客户电话">
              <el-input disabled="disabled" value="后台读取"></el-input>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="8">
            <el-form-item label="内部编号">
              <el-input v-model="publicData24.insideNum"></el-input>
            </el-form-item>
          </el-col> -->
        <!-- <el-row>
          <el-col :span="16">
            <el-form-item label="客户备注：">
              <el-input v-model="publicData24.mome"></el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="船代：">
              <el-input :disabled="true" v-model="publicData24.shipAgencyName" style="width: 170px; height: 28px; line-height: 28px; color: #409eff;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="船公司：">
              <!-- <el-select v-model="publicData24.company" filterable placeholder="请选择" @change="companyChange">
                  <el-option
                    v-for="item in chuangongshiOptions"
                    :key="item.boatAgentName"
                    :label="item.boatAgentName"
                    :value="item.boatAgentName"
                  ></el-option>
                </el-select> -->
                <el-input :disabled="true" v-model="publicData24.company" style="width: 170px; height: 28px; line-height: 28px; color: #409eff;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="放箱员：">
              <el-select style="width: 170px; height: 28px; line-height: 28px;" v-model="publicData24.putBoxPartId" filterable clearable placeholder="放箱员选择">
              <el-option
                v-for="item in putBoxPartOptions"
                :key="item.fullName"
                :label="item.fullName"
                :value="item.salesmanId"
              ></el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="业务员">
              <el-input v-model="publicData24.userName"></el-input>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="8">
            <el-form-item label="业务员手机">
              <el-input disabled="disabled" value="后台读取"></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
        <!-- <el-row> -->
          <!-- <el-col :span="8">
            <el-form-item label="状态">
              <el-select v-model="publicData24.boxState">
                <el-option label="新业务" value="0"></el-option>
                <el-option label="放单中" value="1"></el-option>
                <el-option label="已完成" value="2"></el-option>
                <el-option label="已拒绝" value="3"></el-option>
                <el-option label="没预配" value="4"></el-option>
                <el-option label="船期早" value="5"></el-option>
                <el-option label="明天放" value="6"></el-option>
                <el-option label="已退关" value="7"></el-option>
                <el-option label="等通知" value="8"></el-option>
                <el-option label="客户取消" value="9"></el-option>
                <el-option label="退单" value="10"></el-option>
                <el-option label="申请中" value="11"></el-option>
                <el-option label="爆仓" value="12"></el-option>
                <el-option label="有问题" value="13"></el-option>
                <el-option label="缺箱子" value="14"></el-option>
                <el-option label="换单中" value="15"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="8">
            <el-form-item label="回单状态">
              <el-input disabled="disabled" value="点击单子已回后系统生成"></el-input>
            </el-form-item>
          </el-col> -->
        <!-- </el-row> -->
        <!-- <el-row> -->
          <!-- <el-col :span="8">
            <el-form-item label="回单时间">
              <el-input disabled="disabled" value="点击单子已回后系统生成"></el-input>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="8">
            <el-form-item label="申请时间">
              <el-input disabled="disabled" value="默认与下单时间相同"></el-input>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="8">
            <el-form-item label="完成时间">
              <el-input disabled="disabled" value="状态改为【已完成】时间"></el-input>
            </el-form-item>
          </el-col> -->
        <!-- </el-row> -->
        <el-row>
          <el-col :span="16">
            <el-form-item label="要求：">
              <el-input type="textarea" v-model="publicData24.mome"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="8">
            <el-form-item label="下单时间">
              <el-input disabled="disabled" value="下单后系统生成"></el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row style="margin: 20px 0 10px 0">
        <el-button @click="newBoxModel" type="primary" size="small">新建箱型</el-button>
      </el-row>
      <el-table border :data="publicData24.boxList" style="width: 100%">
        <el-table-column align="center" type="index" label="序号">
        </el-table-column>
        <el-table-column align="center" label="尺寸">
          <template slot-scope="scope">
            <el-select v-model="scope.row.boxSize" placeholder="请选择">
              <el-option label="20" value="20"></el-option>
              <el-option label="40" value="40"></el-option>
              <el-option label="45" value="45"></el-option>
              <el-option label="10" value="10"></el-option>
              <el-option label="53" value="53"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="箱型">
          <template slot-scope="scope">
            <el-select v-model="scope.row.boxType" placeholder="请选择">
              <el-option label="GP" value="GP"></el-option>
              <el-option label="HC" value="HC"></el-option>
              <el-option label="FR" value="FR"></el-option>
              <el-option label="FQ" value="FQ"></el-option>
              <el-option label="HG" value="HG"></el-option>
              <el-option label="OT" value="OT"></el-option>
              <el-option label="OH" value="OH"></el-option>
              <el-option label="RF" value="RF"></el-option>
              <el-option label="RH" value="RH"></el-option>
              <el-option label="TK" value="TK"></el-option>
              <el-option label="GH" value="GH"></el-option>
              <el-option label="HT" value="HT"></el-option>
              <el-option label="PF" value="PF"></el-option>
              <el-option label="HQ" value="HQ"></el-option>
              <el-option label="HCHT" value="HCHT"></el-option>
              <el-option label="GPHT" value="GPHT"></el-option>
              <el-option label="HCFR" value="HCFR"></el-option>
              <el-option label="HCOT" value="HCOT"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="箱量">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.boxnum" :min="0"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="deleteModel(scope.$index)" size="mini" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-row style="margin: 20px 0 10px 0">
        <h3>费用明细</h3>
      </el-row> -->
        <!-- <el-form :inline="true" label-width="100px" size="mini">
          <el-form-item v-for="(item, index) in feeData" :key="index" :label="item.feeName">
              <el-input style="width: 100px;" v-model="item.cost"></el-input>
          </el-form-item>
        </el-form> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clear" size="mini" style="margin-right: 30px;">复 制</el-button>
        <el-button @click="close" size="mini">取 消</el-button>
        <el-button type="primary" v-if="loadShow" @click="add" size="mini">确 定</el-button>
        <el-button type="primary" v-else :loading="true">加载中</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { insertPutBoxInfo, SearchUserInfo, boatNameList, yardList, blnoGetBoatCompany, getBoatInfo, getSalesman, getJKXBoatInfo } from '../api/putBoxManage'
import util from '@util'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      myVisible: this.visible,
      loadingViewAll: false,
      publicData24: {
        company: '',
        voyage: '',
        port: '',
        openTime: '',
        endTime: '',
        shipAgencyName: '',
        boatAgentId: '',
        shipAgencyId: '',
        boxState: '0',
        putBoxPartId: '',
        mome: '',
        boxList: [
          {boxSize: '20', boxType: 'GP', boxnum: '0'},
          {boxSize: '40', boxType: 'GP', boxnum: '0'},
          {boxSize: '40', boxType: 'HC', boxnum: '0'}
        ],
        PutBoxFee: [
          {
            feeName: '12',
            Fee: '12'
          }
        ]
      },
      loadShow: true,
      tableData2: [],
      tableData3: [],
      hangciArr: [],
      feeData: [],
      chuangongshiOptions: [],
      yardOptions: [],
      chuanmingOptions: [],
      kehuOptions: [],
      sailNumData: [],
      putBoxPartOptions: [],
      models: [
        {boxType: '', boxQuantity: 1}
      ]
    }
  },
  watch: {
    myVisible (value) {
      this.$emit('visibleChange', value)
    },
    visible (value) {
      console.log(value, '12123')
      this.myVisible = value
    }
  },
  async mounted () {
    await this.getKehu()
    // this.getBoatCom()
    this.getBoat()
    this.getYard()
    this.getPutBoxPartList()
  },
  methods: {
    async getBoatIofnJH () {
      if (this.publicData24.boat === '') {
        this.$message({
            message: '请输入船名',
            type: 'warning',
            duration: 1500
          })
      } else {
        this.loadingViewAll = true
        let res = await getJKXBoatInfo({
          boatName: this.publicData24.boat
        })
        if (res.status === 200) {
           this.chuanmingOptions = res.data
           this.loadingViewAll = false
        } else {
          this.loadingViewAll = false
          this.$message({
            message: res.msg,
            type: 'warning',
            duration: 1500
          })
        }
      }
    },
    // 获取放箱员信息
    async getPutBoxPartList () {
      let res = await getSalesman({
        num: 1000000,
        page: 1,
        userType: 9,
        state: 1
      }
      )
      this.putBoxPartOptions = res.data
    },
    clear () {
      if (util.getItem('$fxExportData') === null) {

      } else {
        this.publicData24 = util.getItem('$fxExportData')
      }
    },
    // duichangId (item) {
    //   this.publicData24.yardId = item.yardId
    // },
    async getBoatComBlon () {
      let res = await blnoGetBoatCompany({
        blno: this.publicData24.blno,
        imo: 2
      })
      if (res.status === 201) {
        this.publicData24.company = ''
        this.publicData24.shipAgencyName = ''
        this.publicData24.boatAgentId = ''
        this.publicData24.shipAgencyId = ''
        this.publicData24.putBoxPartId = ''
        this.$notify.error({
          title: '获取失败',
          message: '未找到相关信息!',
          duration: 1000
        })
      } else {
        this.publicData24.company = res.data[0].boatAgent.nameCncode
        this.publicData24.shipAgencyName = res.data[0].boatAgent.text
        this.publicData24.boatAgentId = res.data[0].boatAgent.boatComId
        this.publicData24.shipAgencyId = res.data[0].boatAgent.shipAgencyId
        this.publicData24.putBoxPartId = res.data[0].boatAgent.putBoxPartId
      }
    },
    // companyChange (a) {
    //   this.chuangongshiOptions.map((item, index, arr) => {
    //     if (a === item.boatAgentName) {
    //       this.publicData24.boatAgentId = item.boatAgentId
    //     }
    //   })
    // },
    // 获取船公司
    // async getBoatCom () {
    //   let res = await boatCompanyList({
    //     nameCncode: ''
    //   })
    //   this.chuangongshiOptions = res.data
    // },
    // 获取堆场
    async getYard () {
      let res = await yardList({
        code: '',
        yardName: '',
        yardArea: '',
        phoneNumber: ''
      })
      this.yardOptions = res.data
    },
    // 获取船名
    async getBoat () {
      let res = await boatNameList({
        content: ''
      })
      this.chuanmingOptions = res.data
    },
    async chuanmingChange (val) {
      this.publicData24.boat = val.shipName
      this.publicData24.voyage = val.voyage
      this.publicData24.port = val.berthName
      this.publicData24.openTime = ''
      this.publicData24.endTime = ''
      let res = await getBoatInfo({
        boatName: val.shipName,
        voyage: val.voyage
      })
      // this.hangciArr = res.data
      // this.publicData24.voyage = res.data[0].sailNum
      // this.publicData24.port = res.data[0].portArea
      this.publicData24.openTime = res.data[0].openPortTime
      this.publicData24.endTime = res.data[0].closePortTime
    },
    modhangciChange (val) {
      // this.newchukou.hangci = val.sailNum
      this.publicData24.port = ''
      this.publicData24.openTime = ''
      this.publicData24.endTime = ''
      this.hangciArr.map((item, index, arr) => {
        if (item.sailNum === val.sailNum) {
          this.publicData24.port = item.portArea
          this.publicData24.openTime = item.openPortTime
          this.publicData24.endTime = item.closePortTime
        }
      })
    },
    async hangciSearch (queryString, cb) {
      // this.newchukou.hangci = queryString
      // let res = await getBoatInfo({
      //   content: this.modifyMod.chuanming
      // });
      var restaurants = this.hangciArr
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
      // let {data, status} = res
      //   let restaurants = res
      //   clearTimeout(this.timeout)
      //   this.timeout = setTimeout(() => {
      //       cb(restaurants)
      //   }, 50 * Math.random())
      // var restaurants = this.chuanmingOptions
      // var results = queryString
      //   ? restaurants.filter(this.createFilter(queryString))
      //   : restaurants
      // // 调用 callback 返回建议列表的数据
      // cb(results)
    },
    // duiSearch (queryString, cb) {
    //   var restaurants = this.yardOptions
    //   var results = queryString
    //     ? restaurants.filter(this.createFilter(queryString))
    //     : restaurants
    //   cb(results)
    // },
    async shipSearch (queryString, cb) {
      let res = await boatNameList({
        content: queryString
      })
      let {data, status} = res.data
        let restaurants = res.data
        clearTimeout(this.timeout)
        this.timeout = setTimeout(() => {
            cb(restaurants)
        }, 50 * Math.random())
      // var restaurants = this.chuanmingOptions
      // var results = queryString
      //   ? restaurants.filter(this.createFilter(queryString))
      //   : restaurants
      // cb(results)
    },
    createFilter (queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
      }
    },
    // 删除箱型
    deleteModel (index) {
      this.publicData24.boxList.splice(index, 1)
    },
    // 新建箱型
    newBoxModel () {
      this.publicData24.boxList.push({boxSize: '', boxType: '', boxnum: '1'})
    },
    // async getFee () {
    //   let res = await GetputBoxFee()
    //   this.feeData = res.data
    // },
    async getKehu () {
      let res = await SearchUserInfo({
        num: 1000000,
        page: 1
      })
      this.kehuOptions = res.data
    },
    async add () {
      this.loadShow = false
      // this.publicData24.clientName = ''
      // this.publicData24.boxType = this.models
      // this.publicData24.PutBoxFee = this.feeData
      // console.log(this.publicData24.boxList.length, '1232')
      util.setItem('$fxExportData', this.publicData24)
      // this.publicData24.boxList.map((item, index, arr) => {
      //   console.log(item.boxnum, '1232')
      //   if (item.boxnum === 0) {
      //     this.publicData24.boxList.splice(index, 1)
      //   }
      // })
      // for (let i = 0; i < this.publicData24.boxList.length; i++) {
      //   console.log(this.publicData24.boxList[i].boxnum, '11233')
      //   if (this.publicData24.boxList[i].boxnum === 0) {
      //     this.publicData24.boxList.splice(i, 1)
      //   }
      // }

      let res = await insertPutBoxInfo(this.publicData24)
      if (res.status === 200) {
        this.loadShow = true
        this.$emit('childMethod')
        this.$store.commit('hide_new_order_dialog')
        this.$notify({
          title: '新增成功',
          message: '新增成功',
          type: 'success',
          duration: 1000
        })
        this.publicData24.customerId = ''
        this.publicData24.startTime = ''
        this.publicData24.port = ''
        this.publicData24.blno = ''
        this.publicData24.boat = ''
        this.publicData24.voyage = ''
        this.publicData24.company = ''
        this.publicData24.shipAgencyName = ''
        this.publicData24.mome = ''
        this.publicData24.boxList = [
          {boxSize: '20', boxType: 'GP', boxnum: '0'},
          {boxSize: '40', boxType: 'GP', boxnum: '0'},
          {boxSize: '40', boxType: 'HC', boxnum: '0'}
        ]
        // this.publicData24.boxList = [
        //   {boxSize: '20', boxType: 'GP', boxnum: '0'},
        //   {boxSize: '40', boxType: 'GP', boxnum: '0'},
        //   {boxSize: '40', boxType: 'HC', boxnum: '0'}
        // ]
      } else {
        this.loadShow = true
        this.$notify.error({
          title: '添加失败',
          message: res.msg,
          duration: 1000
        })
      }
    },
    close () {
      this.myVisible = false
    }
  }
}
</script>

<style lang="less">
.el-autocomplete-suggestion {
    width: auto !important;
}
  .new-order-dialog {
    .el-input.is-disabled .el-input__inner {
      color: #409eff;
    }
    // .el-input__inner {
//     width: 170px;
//     height: 28px;
//     line-height: 28px;
//   }
  }
</style>
